<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>jQuery treeview</title>

<link rel="stylesheet" href="../jquery.treeview.css" />
<link rel="stylesheet" href="screen.css" />


<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script src="../jquery.treeview.edit.js" type="text/javascript"></script>

<script src="../../../ui/ui.core.js" type="text/javascript"
	charset="utf-8"></script>
<script src="../../../ui/ui.droppable.js" type="text/javascript"
	charset="utf-8"></script>
<script src="../jquery.treeview.sortable.js" type="text/javascript"></script>

<style type="text/css" media="screen">
.drop {
	background-color: #eee !important;
	border: 1px dotted #333;
}

.bar {
	border-bottom: 1px dotted blue;
}

.float {
	float: left;
	border: 1px solid #aaa;
	margin: 10px;
	padding: 10px;
}

div.treeview-helper {
	border: 1px solid #aaa;
	background: #fff;
	padding: 5px;
	padding-left: 25px;
}
</style>

<script type="text/javascript">
		(function($) {
			var CLASSES = $.treeview.classes;
			var proxied = $.fn.treeview;
			$.fn.treeview = function(settings) {
				settings = $.extend({}, settings);
				if (settings.update) {
					return this.trigger("update", [settings.update]);
				}
				return proxied.apply(this, arguments).bind("update", function(event, branches) {
					if (branches.hasClass(CLASSES.last) || branches.hasClass(CLASSES.lastExpandable) || branches.hasClass(CLASSES.lastCollapsable)) {
						branches.prev().addClass(CLASSES.last)
						.filter("." + CLASSES.expandable).replaceClass(CLASSES.last, CLASSES.lastExpandable).end()
						.find(">.hitarea").replaceClass(CLASSES.expandableHitarea, CLASSES.lastExpandableHitarea).end()
						.filter("." + CLASSES.collapsable).replaceClass(CLASSES.last, CLASSES.lastCollapsable).end()
						.find(">.hitarea").replaceClass(CLASSES.collapsableHitarea, CLASSES.lastCollapsableHitarea);
					}
				});
			};

		})(jQuery);




	$.fn.sortableTreeview = function(o) {
		this.each(function() {

			$(this).treeview().sortableTree({
				connectWith: o.connectWith,
				items: 'li',
				helper: function(e,item) {
					return $("<div class='treeview-helper'>"+item.find("span").html()+"</div>");
				},
				//revert: true,
				sortIndication: {
					down: function(item) {
						item.css("border-top", "1px dotted black");
					},
					up: function(item) {
						item.css("border-bottom", "1px dotted black");
					},
					remove: function(item) {
						item.css("border-bottom", "0px").css("border-top", "0px");
					}
				},
				start: function(event, ui) {
					ui.instance.element.treeview({update: ui.item});

				},
				update: function(event, ui) {
					ui.item.removeClass();
					ui.instance.element.treeview({add: ui.item});
				}
			});

			$(".folder", this).droppable({
				accept: "li",
				hoverClass: "drop",
				tolerance: "pointer",
				drop: function(e,ui) {
					$("> ul", this.parentNode).append(ui.draggable);
				},
				over: function(e,ui) {
					ui.helper.css("outline", "2px solid green");
				},
				out: function(e,ui) {
					ui.helper.css("outline", "2px solid red");
				}
			});

		});
	};


		$(function() {


			$("#browser, #browser2").sortableTreeview({ connectWith: ["#browser", "#browser2"] });

		})

	</script>

</head>
<body>

	<h1 id="banner">
		<a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery
			Treeview Plugin</a> Demo
	</h1>
	<div id="main">

		<a href=".">Main Demo</a>

		<h4>Sample 1 - default, right-click to remove items</h4>

		<div class="float">
			<ul id="browser" class="filetree">
				<li><span class="folder">Folder 1</span>
					<ul>
						<li><span class="file">Item 1.1</span></li>
					</ul></li>
				<li><span class="folder">Folder 2</span>
					<ul>
						<li><span class="folder">Subfolder 2.1</span>
							<ul id="folder21">
								<li><span class="file">File 2.1.1</span></li>
								<li><span class="file">File 2.1.2</span></li>
								<li><span class="file">File 2.1.3</span></li>
								<li class="closed"><span class="folder">Folder 3
										(closed at start)</span>
									<ul>
										<li><span class="file">File 3.1</span></li>
									</ul></li>
								<li><span class="file">File 2.1.4</span></li>
								<li><span class="file">File 2.1.5</span></li>
								<li><span class="file">File 2.1.6</span></li>
							</ul></li>
						<li><span class="file">File 2.2</span></li>
					</ul></li>
				<li class="closed"><span class="folder">Folder 3 (closed
						at start)</span>
					<ul>
						<li><span class="file">File 3.1</span></li>
					</ul></li>
				<li><span class="file">File 4</span></li>
			</ul>
		</div>

		<div class="float">
			<ul id="browser2" class="filetree">
				<li><span class="folder">Folder 1</span>
					<ul>
						<li><span class="file">Item 1.1</span></li>
					</ul></li>
				<li><span class="folder">Folder 2</span>
					<ul>
						<li><span class="folder">Subfolder 2.1</span>
							<ul id="folder21">
								<li><span class="file">File 2.1.1</span></li>
								<li><span class="file">File 2.1.2</span></li>
								<li><span class="file">File 2.1.3</span></li>
								<li class="closed"><span class="folder">Folder 3
										(closed at start)</span>
									<ul>
										<li><span class="file">File 3.1</span></li>
									</ul></li>
								<li><span class="file">File 2.1.4</span></li>
								<li><span class="file">File 2.1.5</span></li>
								<li><span class="file">File 2.1.6</span></li>
							</ul></li>
						<li><span class="file">File 2.2</span></li>
					</ul></li>
				<li class="closed"><span class="folder">Folder 3 (closed
						at start)</span>
					<ul>
						<li><span class="file">File 3.1</span></li>
					</ul></li>
				<li><span class="file">File 4</span></li>
			</ul>
		</div>

	</div>

</body>
</html>